﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DevBridge Autocomplete Demo</title>
    <link href="jquery.autocomplete.css" rel="stylesheet" />
    
</head>
<body >
  
    <form class="form-horizontal" role="form">
    <div style="width: 50%; margin: 0 auto; clear: both;">
        <h2>Dynamic Width</h2>
        <p>Type country name in english:</p>
        <div>
        <div class="form-group">
            <div class="col-sm-10">
              	<input type="text"  id="autocomplete-dynamic" class="autocomplete-ipt"/>
            	<input type="hidden" name="country" id="autocomplete-dynamic-hide" />
            </div>
      </div>
            
        </div>
    </div>
    
    
    <div style="width: 50%; margin: 0 auto; clear: both;">
    	<h2>Ajax Lookup</h2>
        <p>Type country name in english:</p>
        <div class="form-group">
            <div class="col-sm-10">
              <input type="text" name="country" id="autocomplete-ajax" class="form-control" />
            </div>
      </div>
       <div class="form-group">
            <div class="col-sm-10">
               <input type="text" name="country" id="autocomplete-ajax-x"  class="form-control" />
            </div>
      </div>
        <div style="position: relative;">
            
           
        </div>
     </div>
</form>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="jquery.autocomplete.js"></script>
    
    <script type="text/javascript" >	
		$(function () {
			'use strict';
			var countries = {data:[
				{displayValue:"Andorra", realValue:"ad"},
				{displayValue:"United Arab Emirates", realValue:"u"},
				{displayValue:"Belgium", realValue:"bl"},
				{displayValue:"Burundi", realValue:"br"}
			], success:true};
			var countriesArray = $.map(countries.data, function (value, key) { 
				return { value:value.displayValue , data: value }; 
			});
		
			// Initialize autocomplete with custom appendTo:
			$('#autocomplete-dynamic').autocomplete({
				lookup: countriesArray, // datasource
				minChars:0,
				lookupLimit:3,
				onSelect: function (suggestion) {
					$('#autocomplete-dynamic-hide').val(suggestion.data.realValue);
				}
			});
			
			
			$("#autocomplete-ajax").autocomplete({
				serviceUrl: '/jQuery-Autocomplete-master/scripts/data.json?a='+$("#autocomplete-ajax").val(),
				dataType:"json",
				transformResult: function(response) {
					return {
						suggestions: $.map(response.data, function(dataItem) {
							return { value: dataItem.displayValue, data: dataItem };
						})
					};
				},
				onSelect: function (suggestion) {
					$('#autocomplete-ajax-x').val(suggestion.data.realValue);
				}
			});
			
		});
    </script>
</body>
</html>
